<template>
  <div class="dataBox">
    <div style="display: flex">
      <div class="dataInfo" v-for="(item, index) in weatherList" :key="index">
        <!-- 格式化日期显示 -->
        <p>{{ formatDay(item.date) }}</p>
        <p>{{ item.date }}</p>
        <p>{{ item.dayweather }}</p>
        <p>风力：{{ item.nightpower }}级</p>
      </div>
    </div>

    <div class="charts">
      <v-chart :option="option"/>
    </div>
  </div>
</template>

<script setup>
import {ref, defineProps, nextTick, onMounted} from 'vue'
import {format, isToday, isTomorrow, parseISO} from 'date-fns'
import {zhCN} from 'date-fns/locale'
import {getWeatherForecastByAdcode} from "@/api/index.js";

const props = defineProps({
  detailCode: {
    type: String,
    default: ''
  }
})

const option = ref({})
const weatherList = ref([])
const chartRef = ref(null) // 用于获取 ECharts 实例

// 渲染图表的函数
const renderChart = (dates, dayTemps, nightTemps) => {
  option.value = {
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: dates,
      axisLine: {lineStyle: {color: '#fff'}},
      axisLabel: {color: '#fff'},
      show: false
    },
    yAxis: {
      type: 'value',
      axisLine: {show: false},
      axisTick: {show: false},
      axisLabel: {color: '#fff'},
      splitLine: {show: false},
      show: false
    },
    grid: {
      left: '10%',
      right: '10%',
      top: '15%',
      bottom: '0%',
      containLabel: true
    },
    series: [
      {
        name: '白天气温',
        type: 'line',
        smooth: true,
        data: dayTemps,
        label: {
          show: true,
          formatter: '白{c}℃',
          position: 'top',
          color: '#fff'
        },
        lineStyle: {color: '#7b84eb'},
        itemStyle: {color: '#c6bfff'}
      },
      {
        name: '晚间气温',
        type: 'line',
        smooth: true,
        data: nightTemps,
        label: {
          show: true,
          formatter: '晚{c}℃',
          position: 'top',
          color: '#fff'
        },
        lineStyle: {color: '#a0cf57'},
        itemStyle: {color: '#c7f368'}
      }
    ]
  }
}



// 格式化日期的函数
const formatDay = (date) => {
  if (!date) return ''

  let parsedDate = null

  try {
    parsedDate = parseISO(date)
  } catch (e) {
    console.error('Error parsing date:', date)
    return ''
  }

  if (isToday(parsedDate)) {
    return '今天'
  } else if (isTomorrow(parsedDate)) {
    return '明天'
  } else {
    return format(parsedDate, 'EEEE', {locale: zhCN})
  }
}

// 监听 weatherList 数据的变化
// watch(
//     () => props.weatherList,
//     (newData) => {
//       debugger
//       if (newData && newData.length > 0) {
//         const dates = newData.map(item => item.date)
//         const dayTemps = newData.map(item => item.daytemp)
//         const nightTemps = newData.map(item => item.nighttemp)
//         // 在 nextTick 中渲染图表
//         nextTick(() => {
//           renderChart(dates, dayTemps, nightTemps)
//         })
//       }
//     },
//     {immediate: true} // 确保首次渲染时也会更新图表
// )


onMounted(async () => {
  // 获取天气预报数据
  let forecastData = await getWeatherForecastByAdcode(props.detailCode)
  weatherList.value = forecastData.forecasts[0].casts

  // 提取日期、白天气温和晚间气温
  debugger
  const dates = weatherList.value.map(item => item.date)
  const dayTemps = weatherList.value.map(item => item.daytemp)
  const nightTemps = weatherList.value.map(item => item.nighttemp)

  // 在 nextTick 中渲染图表
  await nextTick(() => {
    renderChart(dates, dayTemps, nightTemps)
  })
})
</script>


<style scoped lang="scss">
.dataBox {
  width: 100%;
  margin-top: 8px;
  border-radius: 5px;
  background-color: rgb(0 78 113 / 1);
  padding-top: 2.5rem;
  padding-left: 3rem;
  padding-right: 3rem;
  display: flex;
  flex-direction: column;

  .dataInfo {
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    text-align: center;
    gap: 1rem;
    color: white;

    p {
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
    }
  }

  .charts {
    margin-top: 40px;
    height: 160px;
  }
}
</style>
